<template>
  <div class="ga-warp">
    <div class="ga-header">
      <span class="ga-back-btn iconfont" @click="back">&#xe66a;</span>
      <span class="ga-title">景区图片</span>
    </div>
    <div class="ga-content">
      <ul class="ga-list">
        <li class="ga-list-item" v-for="item in imgs" @click="showGallery">
          <router-link to="">
            <div class="img-warp">
              <img :src="item" />
            </div>
          </router-link>
        </li>
      </ul>
    </div>

    <div class="mask" @click="hideGallery">
      <div class="mask-center">
        <swiper :options="swiperOptions">
          <swiper-slide v-for="(item,index) in imgs" :key="index">
            <div>
              <img :src="item" />
            </div>
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination">{{this.imgs.length}}</div>
        </swiper>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Gallery',
    data: function() {
      return {
        imgs: [
          'http://img1.qunarzz.com/sight/p0/1409/19/adca619faaab0898245dc4ec482b5722.jpg_350x240_8e61302a.jpg',
          'http://img1.qunarzz.com/sight/p0/1909/4e/4e1afc2e1133ade7a3.img.jpg_350x240_2646c984.jpg',
          'http://img1.qunarzz.com/sight/p0/1907/ca/ca68bd95bc36bdba3.img.jpg_350x240_0d9e7931.jpg',
          'http://img1.qunarzz.com/sight/p0/1907/cd/cdd8448b61cd6042a3.img.jpg_350x240_9bd65569.jpg',
          'http://img1.qunarzz.com/wugc/p180/201306/16/7f08e81624346b1693835fbb.jpg_350x240_b09a9503.jpg',
          'http://img1.qunarzz.com/sight/p0/1410/9d/fe8109ab5df1c9c324e74284fa802e72.water.jpg_350x240_8571d9ed.jpg',
          'http://img1.qunarzz.com/wugc/p123/201211/19/a2045d091f02b25493835fbb.png_350x240_cf4cd08e.png',
          'http://img1.qunarzz.com/sight/p55/201211/04/fbcab3e5d6479ce893835fbb.jpg_350x240_df8ba9f7.jpg'
        ],
        swiperOptions: {
          loop: true,
          autoPlay: false,
          pagination: {
            el: '.swiper-pagination',
            type: 'fraction'
          },
          observer: true, //修改swiper自己或子元素时，自动初始化swiper
          observeParents: true, //修改swiper的父元素时，自动初始化swiper
        }
      }
    },
    methods: {
      showGallery: function() {
        var oMask = document.getElementsByClassName('mask')[0];
        oMask.style.display = 'block';
      },
      hideGallery: function() {
        var oMask = document.getElementsByClassName('mask')[0];
        oMask.style.display = 'none';
      },
      back: function() {
        this.$router.back();
      }
    }
  }
</script>

<style scoped="scoped">
  img {
    width: 100%;
  }

  .ga-warp {
    position: relative;
    width: 100%;
    background-color: #f5f5f5;
  }

  .ga-warp .ga-header {
    position: relative;
    width: 100%;
    height: .88rem;
    background-color: #FFFFFF;
    line-height: .88rem;
    border-bottom: 1px solid #CACACA;
  }

  .ga-warp .ga-header :nth-child(1) {
    position: absolute;
    left: 0;
    width: .8rem;
    height: .88rem;
  }

  .ga-warp .ga-content {
    width: 100%;
    height: 100%;
  }

  .ga-warp .ga-content ul {
    list-style: none;
    padding: .1rem .2rem .4rem .2rem;
    zoom: 1;
    overflow: hidden;
  }

  .ga-warp .ga-content .ga-list .ga-list-item {
    width: 50%;
    float: left;
    margin-bottom: .1rem;
    box-sizing: border-box;
  }

  .ga-warp .ga-content .ga-list .ga-list-item:nth-child(odd) {
    padding-right: .05rem;
  }

  .ga-warp .ga-content .ga-list .ga-list-item:nth-child(even) {
    padding-left: .05rem;
  }

  .mask {
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #000000;
  }

  .mask .mask-center {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    justify-items: center;
    align-items: center;
    touch-action: none;
  }

  .mask .mask-center .swiper-pagination{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100px;
    height: 50px;
    background-color: red;
  }

  .mask .mask-center>>>.swiper-pagination span {
    color: #FFFFFF;
  }
</style>
